<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流图片展示</title>
  <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    #box{margin: 0 auto;position: relative;}
    .item {box-shadow: 2px 2px 2px #999;position: absolute;}
  </style>
  <script>
      window.onload = function(){
        var box = document.querySelector('#box');
        var imgs = Array.from(document.querySelectorAll("#box .item"));
        const tag = 10;
        var imgWidth = imgs[0].offsetWidth;
        var num = Math.floor(window.innerWidth / (imgWidth + tag));
        box.style.width = num * imgWidth + (num - 1) * tag + 'px';
        var arr = [];
        waterfall();
        function waterfall (){
          arr = [];
            for(var i = 0; i < imgs.length - 1; i++){
            if(i < num){
              imgs[i].style.top = 0 + 'px';
              imgs[i].style.left = i * (tag + imgWidth) + 'px';
              arr.push(imgs[i].offsetHeight);
            }else{
              let minHeight = Math.min(...arr),
                minIndex = arr.indexOf(minHeight);
              imgs[i].style.top = minHeight  + 'px';
              imgs[i].style.left = minIndex * (imgWidth + tag) + 'px'; 
              arr[minIndex] += imgs[i].offsetHeight + tag ;
            }
          }
        }
        var timer = null;
        window.onscroll = function(){
          var scrollTop = document.documentElement.scrollTop || document.scrollTop;
          var maxHeight = Math.max(...arr);
          if(scrollTop >= maxHeight - window.innerHeight -12){
          clearInterval(timer);
          timer = setTimeout(() => {
            setTimeout(() =>{
              var json = [
            "images/01.jpg",
            "images/02.jpg",
            "images/03.jpg",
            "images/04.jpg",
            "images/05.jpg",
            "images/06.jpg",
            "images/07.jpg",
            "images/08.jpg",
            "images/09.jpg",
            "images/10.jpg",
            "images/11.jpg",
            "images/12.jpg",
            "images/13.jpg",
            "images/14.jpg",
            "images/15.jpg",
            "images/16.jpg",
            "images/17.jpg"
          ]
          var divs = json.map(src => {
            var div = document.createElement('div');
            div.className = 'item';
            div.innerHTML = `<img src = ${src}>`;
            box.appendChild(div);
            return div
          })
          imgs = imgs.concat(divs);
          var n = 0;
          divs.forEach( div =>{
            div.querySelector('img').onload = function(){
              n++;
              if(n === divs.length){
                waterfall();
              }
            }
            
          })
          },1000)
          },100)
        }
      }
        
      }
  </script>
</head>
<body>
  <div id="box">
      <div class="item"><img src="images/01.jpg"></div>
      <div class="item"><img src="images/02.jpg"></div>
      <div class="item"><img src="images/03.jpg"></div>
      <div class="item"><img src="images/04.jpg"></div>
      <div class="item"><img src="images/05.jpg"></div>
      <div class="item"><img src="images/06.jpg"></div>
      <div class="item"><img src="images/07.jpg"></div>
      <div class="item"><img src="images/08.jpg"></div>
      <div class="item"><img src="images/09.jpg"></div>
      <div class="item"><img src="images/10.jpg"></div>
      <div class="item"><img src="images/11.jpg"></div>
      <div class="item"><img src="images/12.jpg"></div>
      <div class="item"><img src="images/13.jpg"></div>
      <div class="item"><img src="images/14.jpg"></div>
      <div class="item"><img src="images/15.jpg"></div>
      <div class="item"><img src="images/16.jpg"></div>
      <div class="item"><img src="images/17.jpg"></div>
    </div>
  </body>
</html>
